<template>
    <footer>
        <ul>
        <router-link to="/films" custom v-slot="{navigate , isActive}">
            <li @click="navigate" :class="isActive?'kerwinactive':''">
            <i class="iconfont icon-all"></i>
            <span>电影</span>
            </li>
        </router-link>
        <router-link to="/cinemas" custom v-slot="{navigate , isActive}">
            <li @click="navigate" :class="isActive?'kerwinactive':''">
            <i class="iconfont icon-comments">  </i>
            <span>影院</span>
            </li>
        </router-link>
        <router-link to="/center" custom v-slot="{navigate , isActive}">
            <li @click="navigate" :class="isActive?'kerwinactive':''">
            <i class="iconfont icon-account"> </i>
            <span>我的</span>
            </li>
        </router-link>
        </ul>
    </footer>
</template>
<script>
import '../assets/iconfont/iconfont.css'
export default {

}
</script>
<style lang="scss" scoped>
    footer{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height:2.8125rem;
        background-color: white;
        z-index: 100;
        ul{
            display: flex;
            padding: 0px;
            li{
                flex: 1;
                display: flex;
                flex-direction: column;
                text-align: center;
                line-height:1.375rem;
                i{
                    font-size: 20px;
                    // margin-top: 0px;

                }
                span{
                    font-size: 14px;
                    // margin-bottom: 1px;
                }
            }
        }
    }
</style>
